/*
* @Title: 正常头部样式组件
* @Created by: gsjPC
*/
<template>
	<view>
		<!-- 手机状态栏 -->
		<view :style="{height:statusBarHeight,background:headBgWhite}" class="status-bar">
		</view>
		<view class="com-box" :class="[config.isFixed? 'isFixed':'']" :style="{background:headBgWhite,top:'0',}">
			<view :style="{height:statusBarHeight,background:headBgWhite}" class="status-bar"></view>
			<view style="height: 88upx;width: 100%;position: relative;" :style="{'margin-top':statusBarHeight}">
				<view class="com-left" v-if="config.left.isShowLeft" @tap="leftIconTap">
					<uni-icon type="arrowleft" size="22" :color="[isFixedcolor ? fixedcolor : config.left.leftGobackColor]"></uni-icon>
					<!-- <text :color="config.left.leftTextColor">{{config.left.text}}</text> -->
				</view>
				<view class="com-mid" @tap="midTapHandle" v-if="config.mid.isShowMid" :style="{color:(isfixedTextColor ? '#000000' : config.mid.textColor)}">
					<view>{{config.mid.text}}</view>
					<uni-icon class='com-midIco' :type="config.mid.ico" v-if="config.mid.isShowIco" :style="{color:(isfixedTextColor ? '#000000' : config.mid.icoColor)}"></uni-icon>
				</view>
				<view class="com-right" v-if="config.right.isShowRight" @tap="rightTapHandle">
					<text :style="{color: config.right.textColor}">{{config.right.text}}</text>
					<image :src="config.right.ico" v-if="config.right.isShowRightIco" @tap="rightIcoTapHandle"></image>
					<image :src="config.right.ico2" v-if="config.right.isShowRightIco2" @tap="rightIcoTapHandle2"></image>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				statusBarHeight: global.statusBarHeight + 'px',
				headBgWhite:'',//下滑到一定高度头部白色背景
				isFixedcolor:false,//下滑到一定高度返回箭头颜色
				isfixedTextColor:false,//下滑到一定高度中间字颜色
			}
		},
		props: {
			rightIcoTapHandle: {
				default: function() {
					return function() {
						console.log('rightIcoTapHandle click');
					}
				}
			},
			rightTapHandle:{
				default: function() {
					return function() {
						console.log('rightIcoTapHandle click');
					}
				}
			},
			midTapHandle:{
				default: function() {
					return function() {
						console.log('midIcoTapHandle click');
					}
				}
			},
			config: {
				type: Object,
				default: function() {
					return {
						comScroll:0,
						isFixed: false, //是否absolute布局
						left: {

							isShowLeft: true,
							leftGobackColor: 'black', //左边返回icon颜色
						},
						mid: {
							isShowMid: true,
							text: '添加游记',
							textColor: '#000',
							isShowIco:false,
							ico:'',
							icoColor:'#000'
							
						},
						right: {
							text: '发布',
							textColor: '#000',
							isShowRight: true,
							ico: '', //右侧图标地址
							isShowRightIco: false ,//是否显示右侧图标
							ico2: '', //右侧第二个图标地址
							isShowRightIco2: false //是否显示右侧第二个图标
						}
					}
				}
			},

		},
		methods: {
			leftIconTap() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		beforeDestroy(){
			console.log('comHeader-hide');
			this.$store.commit('scrollUpdate',0)
 			console.log(this.$store.state.scroll);
		},
		created(){
			console.log('created');
			const that = this;
			//获取所有页面
			let curPages = getCurrentPages();
			let pageLen = curPages.length;
			// #ifndef H5
			//监听页面滚动，页面向下滚动时候导航逐渐变白
			curPages[pageLen - 1].onPageScroll = function(e){
				that.$store.commit('scrollUpdate',e.scrollTop)
				// console.log(e.scrollTop)
				if(e.scrollTop > that.config.comScroll){
					that.headBgWhite = '#ffffff'
					that.isfixedTextColor = true
					that.isFixedcolor= true
				}else{
					that.headBgWhite = 'transparent'
					that.isFixedcolor = false
					that.isfixedTextColor = false
				}
				if(e.scrollTop > 800){
					that.$store.commit('showToTopUpdate',true)
				}else{
					that.$store.commit('showToTopUpdate',false)
				}
			}
			// #endif
			
			// #ifdef H5
			window.onscroll = function(e){
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				that.$store.commit('scrollUpdate',scrollTop)
				// console.log(scrollTop);
				if(scrollTop > that.config.comScroll){
					that.headBgWhite = '#ffffff'
					that.isfixedTextColor = true
					that.isFixedcolor= true
				}else{
					that.headBgWhite = 'transparent'
					that.isFixedcolor = false
					that.isfixedTextColor =false
				}
				if(scrollTop > 800){
					that.$store.commit('showToTopUpdate',true)
				}else{
					that.$store.commit('showToTopUpdate',false)
				}
			}
			// #endif
		}
	}
</script>

<style scoped>
	.status-bar{
		display: block;
		width: 100%;
		/* border:1upx solid red; */
		box-sizing:border-box;
		position: fixed;
		z-index: 888;
		top:0;
		left:0;
	}
	.com-box {
		width:100%;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* border:1upx solid green; */
		height: calc(88upx + var(--status-bar-height));
		line-height: 88upx;
		position: fixed;
		z-index: 888;
		left:0;
		box-sizing:border-box;
	}

	.com-box>view {
		line-height: 88upx;
	}

	.isFixed {
		width:100%;
		position: absolute;
		z-index: 888;
		/* height: calc(88upx + var(--status-bar-height)) !important; */
		padding-top:var(--status-bar-height) ;
	}

	.com-left {
		position: absolute;
		display: flex;
		flex-direction: row;
		height: 88upx;
		justify-content: center;
		align-items: center;
		margin-left: 12upx;
		padding:10upx;
	}

	.com-left text {
		font-size: 32upx;
	}

	.com-mid {
		position: absolute;
		width: 50%;
		left: 50%;
		margin-left: -25%;
		font-size: 36upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.com-right {
		position: absolute;
		font-size: 32upx;
		color: #5494FF;
		right: 20upx;
	}

	.com-right image {
		max-width: 42upx;
		max-height: 42upx;
		margin-left:20upx;
	}

	/*  #ifdef MP-WEIXIN */
	.com-right {
		margin-top: 60upx;
	}

	/* #endif */
</style>
